<!-- Privileges -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'staff',
          name: 'Staff',
        },
        {
          routeName: 'Ada Yeo',
          name: 'Ada Yeo',
        },
        {
          name: 'Personal info',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="Staff">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
        
      <div><router-link to="/staffInfo">staff-info</router-link></div>
      <div><router-link to="/staffInfoEdit">staffInfoEdit</router-link></div>
      <div><router-link to="/staff">staff-index</router-link></div>
      </template>
      <GgPageHeader
        :userInfo="userInfo"
        :menuData="['Reset password', 'Edit', 'Delete', 'Archive']"
        title="Ada Yeo"
        subTitle1="ABCDE1234@email.com"
      >
        <div
          slot="title-label"
          class="title-label"
          @click="viewLocations = true"
        >
          <span>{{ viewLabel }}</span>
          <img
            v-if="checkedData.length > 1"
            class="icon-view"
            src="@/assets/images/icons/icon-view.png"
            alt=""
          />
        </div>
        <div slot="subTitleLabel" class="title-label">Teacher</div>
        <div slot="info">
          <div class="title-status mar-b-0">Active</div>
        </div>
      </GgPageHeader>
      <Section title="Admin Console" class="mar-b-20">
        <ul class="admin-console">
          <li>
            <div class="admin-console-header">
              <img
                class="admin-console-header-icon"
                :src="require('@/assets/images/menu/AdminConsole.svg')"
                alt=""
              />
              Admin console
            </div>
            <ul class="admin-console-list">
              <li>
                <img
                  class="admin-console-header-icon"
                  :src="require('@/assets/images/menu/settings.svg')"
                  alt=""
                />
                Settings
              </li>
              <li>
                <img
                  class="admin-console-header-icon"
                  :src="require('@/assets/images/menu/settings.svg')"
                  alt=""
                />
                Roles
              </li>
            </ul>
          </li>
        </ul>
      </Section>
      <Section title="Privileges" :hasFooter="false">
        <ul class="privileges-default">
          <li>
            <div class="privileges-default-header">
              <img
                class="privileges-default-header-icon"
                :src="require('@/assets/images/menu/users_app.svg')"
                alt=""
              />
              <i class="iconfont iconarrow_drop_down-24px" />
              <md-checkbox class="md-primary" v-model="staff" value="1" disabled
                >Staff</md-checkbox
              >
            </div>
            <ul class="privileges-default-list">
              <li>
                <div class="privileges-default-space"></div>
                <div class="privileges-default-role">Staff</div>
                <div class="privileges-default-privilege">Create</div>
                <div class="privileges-default-desc">
                  View all staff records for a location, Add a new staff record
                </div>
              </li>
            </ul>
          </li>
          <li>
            <div class="privileges-default-header">
              <img
                class="privileges-default-header-icon"
                :src="require('@/assets/images/menu/students.svg')"
                alt=""
              />
              <i class="iconfont iconarrow_drop_down-24px" />
              <md-checkbox class="md-primary" v-model="staff" disabled
                >Staff</md-checkbox
              >
            </div>
            <ul class="privileges-default-list">
              <li>
                <div class="privileges-default-space"></div>
                <div class="privileges-default-role">Staff</div>
                <div class="privileges-default-privilege">Create</div>
                <div class="privileges-default-desc">
                  View all staff records for a location, Add a new staff record
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </Section>
    </GgPage>
    <!-- view locations -->
    <gg-Dialog
      :append-to-body="false"
      :visible.sync="viewLocations"
      :show-close="true"
      title="Locations"
    >
      <div class="dialog-content">
        <CheckboxGroup
          :checkTitle="checkTitle"
          :checkedData="checkedData"
          :checkboxList="checkboxList"
          @check="handleCheck"
        />
      </div>
    </gg-Dialog>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      menuDatas: [
        {
          name: "Personal info",
          key: "personalInfo",
          active: true,
          children: [],
        },
        {
          name: "App access",
          key: "appAccess",
        },
      ],
      activeIndex: "personalInfo",
      userInfo: {
        avatar: require("@/assets/logo.png"),
        firstName: "Dierdre",
        lastName: "Hu",
        email: "Dierdre.hu@edoovo.com",
      },
      viewLocations: false,
      checkTitle: "Raffles Kidz International",
      checkedData: ["Yio Chu Kang", "Bukit Panjang"],
      checkboxList: ["Yio Chu Kang", "Bukit Panjang", "Punggol", "Jurong West"],
      staff: ["1"],
    };
  },
  computed: {
    viewLabel() {
      let checkedDataLen = this.checkedData.length,
        checkboxListLen = this.checkboxList.length;
      if (checkedDataLen == 1) {
        return this.checkedData[0];
      } else if (checkedDataLen == checkboxListLen) {
        return "All  locations";
      } else {
        return checkedDataLen + "locations";
      }
    },
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
      this.$router.push({ name: item.key });
    },
    handleCheck(val) {
      this.checkedData = val;
      // console.log(this.locations);
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
/deep/ .section-main {
  margin: 0;
  padding: 0;
}
/deep/ .el-dialog__body {
  max-height: 412px;
  overflow-y: auto;
}
.admin-console {
  font-family: Roboto;
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  &-header {
    display: flex;
    align-items: center;
    padding: 20px;
    color: #000;
    background: #f2f2f2;
    &-icon {
      margin-right: 16px;
      width: 24px;
      height: 24px;
    }
  }
  &-list {
    li {
      padding: 12px 62px;
      border-bottom: 1px solid #e0e0e0;
      color: rgba(0, 0, 0, 0.76);
      &:last-child {
        border-bottom: 0;
      }
    }
  }
}
.privileges-default {
  font-family: Roboto;
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
  li {
    border-top: 1px solid #e0e0e0;
  }
  &-header {
    display: flex;
    align-items: center;
    padding: 2px 40px;
    background: #f2f2f2;
    &-icon {
      margin-right: 20px;
      width: 24px;
      height: 24px;
    }
  }
  &-list {
    li {
      display: flex;
      align-items: center;
      padding: 16px 40px;
      border-bottom: 1px solid #e0e0e0;
      &:last-child {
        border-bottom: 0;
      }
    }
  }
  &-space {
    flex-basis: 120px;
  }
  &-role {
    flex-basis: 220px;
    padding: 0 2px;
  }
  &-privilege {
    flex-basis: 220px;
    padding: 0 10px;
    font-size: 14px;
    color: #202124;
  }
  &-desc {
    padding: 0 10px;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    font-size: 14px;
    color: #202124;
  }
  .iconarrow_drop_down-24px {
    margin-right: 20px;
    font-size: 24px;
    color: #5f6368;
  }
}
</style>